<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>知识点列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-row>
      <el-col :span="10">
        <el-input placeholder="请输入内容" v-model="query" clearable @clear="loadKnowList()">
          <el-button slot="append" icon="el-icon-search" @click="loadKnowList()"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4" :offset="11" style="width: 0; margin-left: 49%">
        <el-button type="primary" @click="addKnow">发表知识点</el-button>
      </el-col>
    </el-row>

    <el-divider><i class="el-icon-tickets"></i></el-divider>

    <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
    >
      <el-table-column label="编号" width="80" align="center">
        <template scope="scope">
          <span>{{ scope.$index + 1 }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="knowledge" label="知识点名称" align="center"/>
      <el-table-column prop="nickname" label="发表者" width="150" align="center"/>
      <el-table-column prop="projectName" label="项目名称" align="center"/>
      <el-table-column prop="knowType" label="知识点类别" width="150" align="center"/>
      <el-table-column prop="createDate" label="发布时间" width="180" align="center"/>
      <el-table-column label="详情" width="80" align="center">
        <template slot-scope="scope">
          <el-button type="primary"
                     icon="el-icon-tickets"
                     circle
                     size="mini"
                     @click="knowDetails(scope.row.id)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="handleEdit(scope.row)"
          />
          <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="openDeleteConfirm(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        align="center"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="limits"
        layout="prev, pager, next, jumper"
        :total="count">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      count: 0,
      currentPage: 1,
      limits: 10,
      list: [],
      listLoading: true
    }
  },
  methods: {
    addKnow() {
      this.$router.push({path: '/knows/add-new'});
    },
    /* 查询知识点总数 */
    countKnow() {
      let query = this.query;
      let url = 'http://localhost:8989/knows/' + query + '/countKnow';
      if (this.query === '') {
        url = 'http://localhost:8989/knows/countKnow';
      }
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.count = responseBody.data;
      })
    },
    /* 分页 */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadKnowList();
    },
    /* 详情 */
    knowDetails(id) {
      this.$router.push({path: '/knows/details', query: {id}})
    },
    /* 修改 */
    handleEdit(know) {
      let url = 'http://localhost:8989/knows/' + know.userId + '/updateTerm';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        } else {
          let id = know.id;
          this.$router.push({path: '/knows/update', query: {id}})
        }
      })
    },
    /* 删除 */
    handleDelete(know) {
      let url = 'http://localhost:8989/knows/' + know.id + '/delete';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.loadKnowList();
        }
      })
    },
    openDeleteConfirm(know) {
      const message = '此操作将删除【' + know.knowledge + '】知识点，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:8989/knows/' + know.userId + '/updateTerm';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .post(url).then((response) => {
          let responseBody = response.data;
          console.log(responseBody);
          if (responseBody.state != 20000) {
            this.$message.error(responseBody.message);
          } else {
            this.handleDelete(know);
          }
        })
      }).catch(() => {
      });
    },
    /* 查询知识点列表 */
    loadKnowList() {
      console.log('loadKnowList');
      let page = this.currentPage - 1;
      let url = 'http://localhost:8989/knows/' + page + '/' + this.limits + '/knowList';
      if (this.query !== "") {
        url = 'http://localhost:8989/knows/' + page + '/' + this.limits + '/' + this.query + '/knowLike';
      }
      this.listLoading = true;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.list = responseBody.data;
        console.log(this.list);
        this.listLoading = false;
      });
      this.countKnow();
    }
  },
  mounted() {
    this.loadKnowList();
    this.countKnow();
  }
}

</script>
